<template>
    <el-dialog
      :title="title"
      :before-close="handleClose"
      :visible="typeDialog"
      :width="handleScreenWidthToVw(400)+'px'"
    >
        <el-form  ref="form" :rules="rules"  :model="formData" :label-width="handleScreenWidthToVw(100)+'px'" >
            <el-form-item label="商品名称" prop="productName">
                <el-input v-model="formData.productName" placeholder="请输入商品名称" class="input-width" />
            </el-form-item>
            <el-form-item label="产品类型" prop="productTypeId">
                <el-select v-model="formData.productTypeId"  clearable filterable class="w-100P">
                    <el-option
                        v-for="state in netTypeList"
                        :key="state.id"
                        :value="state.id"
                        :label="state.typeName"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="产品规格" prop="specificationModel">
                <el-input v-model="formData.specificationModel" placeholder="请输入类型名称" class="input-width" />
            </el-form-item>
            <el-form-item label="库存数量" prop="productCount">
                <el-input v-model="formData.productCount"  placeholder="请输入类型名称" class="input-width" >
                </el-input>
            </el-form-item>

            <el-form-item>
                    <el-button size="mini" type="primary" @click="success('form')">保存</el-button>
                    <el-button size="mini" @click="handleClose()">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { handleScreenWidthToVw } from '@/utils/tools'
import { AddCommodity,ModifyCommodity,getCommodityInfo} from '../api'
export default {
      props: {
            title: { type: String, default: '新增类型' },
            typeDialog: { type: Boolean, default: false },
            typeId: { type: String, default: '0'},
            netTypeList:{ type: Array}
        },
      watch: {
        typeId: {
        deep: true,
        handler(val) {
            console.log(val);
        },
      },
    },
    data() {
        return {
            formData:{
                productName:'',
                productTypeId:'',
                specificationModel:'',
                productCount:''
            },
            rules: {
                productName: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                productTypeId: [
                    { required: true, message: '请选择产品类型', trigger: 'blur' }
                ],
                specificationModel: [
                    { required: true, message: '请输入产品规格', trigger: 'blur' }
                ],
                productCount: [
                    { required: true, message: '请输入库存数量', trigger: 'blur' }
                ],
            },
        }
    },
computed: {
    handleScreenWidthToVw() {
        return handleScreenWidthToVw
    },
},
mounted(){
},
methods: {
    success(form){
        this.$refs[form].validate((valid) => {
            if (valid) {
            if(this.title === '新增') {
                AddCommodity(this.formData).then(res => {
                    if(res) {
                    this.$message({
                        message: '新增成功！',
                        type: 'success'
                    })
                    this.$emit('Refresh')
                   }else{
                    this.$message({
                        message: '新增失败！',
                        type: 'info'
                    })
                   }
                })
                this.handleClose()
            }else{
                ModifyCommodity({id:this.typeId,...this.formData}).then(res => {
                    if(res) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        })
                        this.$emit('Refresh')
                    }else{
                        this.$message({
                            message: '修改失败！',
                            type: 'info'
                    })
                   }
                })
                
                this.handleClose()
            }
            } else {
                return false;
            }
        });
    },
    handleClose() {
        this.$refs.form.resetFields()
        this.$emit('dateDialog')
     },
     drawPid(id){
        getCommodityInfo({tProductStatisticsId:id}).then(res => {
            console.log(res)
            this.formData = res
        })
     }
    }
}
</script>
<style scoped>
::v-deep .el-dialog{ border-radius: 5px;}
::v-deep .el-input-group__append{color: #ccc;}
::v-deep .input-width{margin-top:5px;}
</style>
